import { useEffect, useState } from 'react'
import styles from './index.module.less'
import cm from 'classnames'

const Index = (props) => {
  const { total = 0, onChange, className, step = 30 } = props
  const pageTotal = Math.ceil(total / step)
  const [page, setPage] = useState(1)

  const prev = () => {
    if (page > 1) {
      setPage(page - 1)
    }
  }

  const next = () => {
    if (page < pageTotal) {
      setPage(page + 1)
    }
  }

  useEffect(() => {
    onChange?.(page)
  }, [page])
  return (
    <div className={cm(styles.pagination, className)}>
      <span>共{total}条</span>
      <div className={cm(styles.switch, styles.switchBox, page <= 1 ? styles.not : '')} onClick={prev}>
        <img src="/images/switch.png" />
      </div>
      <div className={cm(styles.switch, styles.page)}>{page}</div>
      <div
        className={cm(styles.switch, styles.switchBox, styles.swR, page >= pageTotal ? styles.not : '')}
        onClick={next}
      >
        <img src="/images/switch.png" />
      </div>
    </div>
  )
}

export default Index
